ProForm comes with a significant number of form items, which are essentially a combination of Form.Item and components. Each form item supports the fieldProps property to support setting the props of the input component. We support pass-through of placeholder, so you can set placeholder directly on the component.
Each form item also supports readonly, which has different read-only styles for different components, making readonly display more friendly compared to disable. The generated dom is also smaller, e.g. ProFormDigit automatically formats decimal digits.
ProFormText is the product of FormItem + Input and can be analogous to the following code.
const ProFormText = (props) => {return (<ProForm.Item {. .props}><Input placeholder={props.placeholder} {. .props.fieldProps} /></ProForm.Item);};
So the props we set for ProFormText are actually for Form.Item, and the fieldProps are for the included Input, remember.
ProForm comes with Filed , which basically corresponds to the valueType one by one.
| parameter | description | type | default |
|---|---|---|---|
| width | The length of the Field, we summarize the common Field lengths and suitable scenarios, support some enumeration "xs" , "s" , "m" , "l" , "x" | number | "xs" | "s" | "m" | "l" | "x" | - |
| rowProps | Passed to Row when grid mode is enabled, Applies only to ProFormGroup, ProFormList, ProFormFieldSet | RowProps | { gutter: 8 } |
| colProps | Passed to Col when grid mode is enabled | ColProps | { xs: 24 } |
| tooltip | will add an icon next to the label to show the configured information when hovered | string | tooltipProps | - |
| secondary | Whether secondary control, only valid for LightFilter | boolean | false |
| allowClear | Support for clearing, valid for LightFilter, will also be passed to fieldProps if actively set. | boolean | true |
In some cases, we need to adapt the input box according to the page display, except that a form area should use the fixed width rule by default.
XS=104px for short numbers, short text or options.S=216px for shorter field entries, such as name, phone, ID, etc.M=328px Standard width, suitable for most field lengths.L=440px Suitable for longer field entries, such as long URLs, tag groups, file paths, etc.XL=552px Suitable for long text entry, such as long links, descriptions, notes, etc., usually used with adaptive multi-line input boxes or fixed height text fields.Same as Input.
<ProFormText name="text" label="Name" placeholder="Please enter a name" fieldProps={inputProps} />
ProFormCaptcha is a component developed to support common CAPTCHA functionality in the middle and backend.
<ProFormCaptchafieldProps={{size: 'large',prefix: <MailTwoTone />,}}captchaProps={{size: 'large',}}// The name of the phone number, which is injected by onGetCaptchaphoneName="phone"name="captcha"rules={[{required: true,message: 'Please enter the verification code',},]}placeholder="Please enter a captcha"// If you need to fail, you can throw an error and onGetCaptcha will stop automatically// throw new Error("Error getting captcha")onGetCaptcha={async (phone) => {await waitTime(1000);message.success(`phone number ${phone} Verification code sent successfully! `);}}/>
| parameters | description | type | default |
|---|---|---|---|
| onGetCaptcha | The event to click to get the captcha, if phoneName is configured it will be injected automatically | (phone)=>Promise<any> | - |
| captchaProps | The props of the Get Captcha button, same as antd's props | ButtonProps | - |
| countDown | The number of seconds to count down | number | 60 |
| captchaTextRender | Render the text of the timer | (timing: boolean, count: number) => React.ReactNode | - |
Same as Input.Password.
<ProFormText.Password label="InputPassword" name="input-password" />
Same as DatePicker.
<ProFormDatePicker name="date" label="date" />
Same as DatePicker.
<ProFormDateTimePicker name="datetime" label="datetime" />
Same as DatePicker.RangePicker.
<ProFormDateRangePicker name="dateRange" label="date" />
Same as DatePicker.RangePicker.
<ProFormDateTimeRangePicker name="datetimeRange" label="datetime" />
Same as DatePicker
<ProFormDateRangePicker name="time" label="time" />
Same as Input.TextArea.
<ProFormTextAreaname="text"label="name"placeholder="Please enter a name"fieldProps={inputTextAreaProps}/>
Requesting remote data is more complicated, see [here](/components/field#remote data) for details.
Same as checkbox, but supports options and layout.
| parameters | description | type | default | | --- | --- | --- | --- | --- | | options | options | Same as select, generates child nodes based on options, recommended. | string[] | {label:ReactNode,value:string}[] | - | | layout | Configure the look of the checkbox to support vertical vertical and horizontal | horizontal | vertical | - |
<ProFormCheckbox.Groupname="checkbox"layout="vertical"label="Industry Distribution"options={['Agriculture', 'Manufacturing', 'Internet']}/>
Requesting remote data is more complicated, see [here](/components/field#remote data) for details.
Same as radio but with support for options.
| parameters | description | type | default | | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | | options | options | Same as select, generates child nodes based on options, recommended. | string[] | {label:ReactNode,value:string}[] | - | | radioType | Set whether button mode or radio mode | default | button | default |
<ProFormRadio.Groupname="radio-group"label="Radio.Group"options={[{label: 'item 1',value: 'a',},{label: 'item 2',value: 'b',},{label: 'item 3',value: 'c',},]}/>
Same as switch.
<ProFormSwitch name="switch" label="Switch" />
Same as rate.
<ProFormRate name="rate" label="Rate" />
Same as slider.
<ProFormSlidername="slider"label="Slider"marks={{0: 'A',20: 'B',40: 'C',60: 'D',80: 'E',100: 'F',}}/>
Same as upload. Dragger style is preset, otherwise it is the same as Upload.
| Parameters | Description | Type | Default | | ----------- | ------------------------- | --------------- | -------------------------------- | -------------------------------------------- | | icon | The chart of the Dragger. | ReactNode | InboxOutlined | | title | Title | Dragger's title | ReactNode | 'Click or drag files to this area to upload' | | description | Dragger's description | ReactNode | 'Support single or bulk uploads' |
<ProFormUploadDragger label="Dragger" name="dragger" action="upload.do" />
Same as upload. The Button style is preset, otherwise it is the same as Upload.
| Parameters | Description | Type | Default |
|---|---|---|---|
| icon | The chart of Dragger. | ReactNode | UploadOutlined |
| title | Dragger's title | ReactNode | Click to upload |
<ProFormUploadButton label="upload" name="upload" action="upload.do" />
Same as select. Both request and valueEnum are supported to generate options.
Requesting remote data is more complicated, see [here](/components/field#remote data) for details.
Why support valueEnum when you have options? valueEnum can be used with tables, descriptions, and has engineering advantages.
| parameters | description | type | default |
|---|---|---|---|
| valueEnum | Enumeration of current values valueEnum | Record | - |
| request | Enumerate data from network requests | ()=>Promise<{[key:string|number]:any}> | - |
<><ProFormSelectname="select"label="Select"valueEnum={{open: 'Unresolved',closed: 'Resolved',}}placeholder="Please select a country"rules={[{ required: true, message: 'Please select your country!' }]}/><ProFormSelectname="select2"label="Select"request={async () => [{ label: 'all', value: 'all' }{ label: 'Unresolved', value: 'open' }{ label: 'Resolved', value: 'closed' }{ label: 'Resolving', value: 'processing' },]}placeholder="Please select a country"rules={[{ required: true, message: 'Please select your country!' }]}/></>
Customize options:
<ProFormSelectname="select"label="Select"options={[{ label: '全部', value: 'all' },{ label: '未解决', value: 'open' },{ label: '已解决', value: 'closed' },{ label: '解决中', value: 'processing' },]}fieldProps={{optionItemRender(item) {return item.label + ' - ' + item.value;},}}placeholder="Please select a country"rules={[{ required: true, message: 'Please select your country!' }]}/>
Same as tree-select. Both request and valueEnum are supported to generate options.
Requesting remote data is more complicated, see [here](/components/field#remote data) for details.
Why support valueEnum when you have options? valueEnum can be used with tables, descriptions, and has engineering advantages.
| parameters | description | type | default |
|---|---|---|---|
| valueEnum | Enumeration of current values valueEnum | Record | - |
| request | Enumerate data from network requests | ()=>Promise<{[key:string|number]:any}> | - |
<ProFormTreeSelectname="name"placeholder="Please select"allowClearwidth={330}secondaryrequest={async () => {return [{title: 'Node1',value: '0-0',children: [{title: 'Child Node1',value: '0-0-0',},],},{title: 'Node2',value: '0-1',children: [{title: 'Child Node3',value: '0-1-0',},{title: 'Child Node4',value: '0-1-1',},{title: 'Child Node5',value: '0-1-2',},],},];}}// tree-select argsfieldProps={{showArrow: false,filterTreeNode: true,showSearch: true,dropdownMatchSelectWidth: false,labelInValue: true,autoClearSearchValue: true,multiple: true,treeNodeFilterProp: 'title',fieldNames: {label: 'title',},}}/>
Same as inputNumber. It comes with a formatting (retains 2 decimal places, minimum value is 0), you can turn it off if needed.
<ProFormDigit label="InputNumber" name="input-number" min={1} max={10} />
If you want to change the number of decimal places.
<ProFormDigitlabel="InputNumber"name="input-number"min={1}max={10}fieldProps={{ precision: 0 }}/>
ProFormMoney's input box for entering amounts supports the display of currency symbols based on global internationalization, negative input, custom currency symbols, and more.
<ProFormMoneylabel="The minimum limit is 0"name="amount1"locale="en-US"initialValue={22.22}min={0}/><ProFormMoneylabel="There is no limit to the amount size"name="amount2"locale="en-GB"initialValue={22.22}/><ProFormMoneylabel="Currency symbols follow global internationalization"name="amount3"initialValue={22.22}/><ProFormMoneylabel="Custom currency symbols"name="amount4"initialValue={22.22}customSymbol="💰"/>
| parameters | description | type | default |
|---|---|---|---|
| locale | The internationalized region values set separately show different currency symbols depending on the region, as detailed in the region directory below | string | zh-Hans-CN |
| customSymbol | Custom amount symbol | string | - |
| numberPopoverRender | Custom Popover's value, false, can close his | ((props: InputNumberProps, defaultText: string) => React.ReactNode) | boolean | false |
| numberFormatOptions | The configuration of NumberFormat, where the documentation can view the of the mdn) | NumberFormatOptions | - |
| min | The minimum value is | number | - |
| max | The maximum value is | number | - |
{"ar-EG": "$","zh-CN": "¥","en-US": "$","en-GB": "£","vi-VN": "₫","it-IT": "€","ja-JP": "¥","es-ES": "€","ru-RU": "₽","sr-RS": "RSD","ms-MY": "RM","zh-TW": "NT$""fr-FR": "€","pt-BR": "R$","ko-KR": "₩","id-ID": "RP","de-DE": "€","fa-IR": "تومان","tr-TR": "₺","pl-PL": "zł","hr-HR": "kn",}